{% extends "airflow/master.html" %}

{% block title %}Airflow - REST API Plugin{% endblock %}

{% block head_css %}
{{ super() }}

{% endblock %}

{% block body %}
 {% if  rbac_authentication_enabled %}
 {% block navbar %}
        <header class="top" role="header">
        {% include 'appbuilder/navbar.html' %}
        </header>
 {% endblock %}
 {%endif%}
<!--Simple Styling is done, so its all listed here:-->
<style type="text/css">
    #dags-table table { border-collapse: collapse; }
    #dags-table td + td, #dags-table th + th { border-left: 1px solid; }
    #dags-table tr + tr { border-top: 1px solid; }
    th, td { padding: 4px; }
    .customInput { width: 74px; display: inline-block; text-align: right; }
</style>

<!--Simple Java Script is used and listed here: -->
<script type="application/javascript">

    // after the fields have been disabled, wait for a few seconds and re-enable them for the next execution
    function enableEmptyFieldsByDelay(form) {
        setTimeout(function() {
            for(var i = 0; i < form.length; i++) {
                form[i].disabled = false;
            }
        }, 2000); //2 seconds
    }

    // upon submission of the form, disable the empty fields so that they aren't passed as GET arguments
    function disableEmptyFields(form) {
        for(var i = 0; i < form.length; i++) {
            if(form[i].value == "") {
                form[i].disabled = true;
            }
        }
        // after the fields have been disabled, pause for a few seconds and then enable them
        enableEmptyFieldsByDelay(form);
        return true;
    }
</script>

<h1>Airflow REST API </h1>

<!--List of relevant documentation-->
<h2>Documentation</h2>
<ul>
    <li><a target="_blank" href="https://airflow.apache.org/cli.html">Official Airflow CLI Documentation</a></li>
    <li><a target="_blank" href="https://github.com/teamclairvoyant/airflow-rest-api-plugin">REST API Plugin Documentation</a></li>
</ul>

<!--List of relevant versions-->
<h2>Versions</h2>
<ul>
    <li>Airflow Version: {{airflow_version}}</li>
    <li>Rest API Plugin Version: {{rest_api_plugin_version}}</li>
</ul>

<!--listing all the DAGs that are available-->
<h2>DAGs:</h2>
<table id="dags-table">
    <tr>
        <th>DAG ID</th><th>Is Active</th>
    </tr>
    {% for dag in dags %}
    <tr>
        <td>{{dag.dag_id}}</td><td>{{dag.is_active}}</td>
    </tr>
    {% endfor %}
</table>

<!--Shows a list of all the available APIs and provides a mechanism to quickly jump to the APIs-->
<h2>API Directory</h2>
<p>Click on one of the links bellow to jump to the API form</p>
<ul>
{% for api_metadata in apis_metadata %}
    <li><a href="#{{api_metadata.name}}">{{api_metadata.name}}</a></li>
{% endfor %}
</ul>

<!--Listing the metadata and information of all the APIs-->
<h2>APIs</h2>
{% for api_metadata in apis_metadata %}
<div>
    <h3><a name="{{api_metadata.name}}">{{api_metadata.name}}</a></h3>
    <h5>{{api_metadata.description}}. Supports both http GET and POST methods.</h5>
    <h5>{{api_metadata.http_method[0]}} {{airflow_webserver_base_url}}{{rest_api_endpoint}}?api={{api_metadata.name}}{% if api_metadata.http_method != 'POST' %}{% for argument in api_metadata.arguments %}{% if argument.name != 'set' %}&{{argument.name}}{% if argument.form_input_type != 'checkbox' %}=value{% endif %}{% endif %}{% if argument.form_input_type =='custom_input'%}&cmd={{argument.name}}{% for argument_data in argument.fields%}&{{argument_data.keys()[0]}}=value{%endfor%}{% endif %}{% endfor %}{% endif %}</h5>

    {% if api_metadata.form_enctype %}
        <h5>enctype={{api_metadata.form_enctype}}</h5>
    {% endif %}

    {% if api_metadata.post_body_description %}
        <h6>{{api_metadata.post_body_description}}</h6>
    {% endif %}

    <h6>Available in Airflow Version: <b>{{api_metadata.airflow_version}}</b></h6>
    <div>
        <form method="{{api_metadata.http_method[0]}}"
              target="_blank"
              action="{{rest_api_endpoint}}{% if api_metadata.http_method == 'POST' %}?api={{api_metadata.name}}{% endif %}"
              enctype="{{ api_metadata.form_enctype if api_metadata.form_enctype else 'application/x-www-form-urlencoded' }}"
              onsubmit="return disableEmptyFields(this)"
        >

            <table>
                <input type="hidden" name="api" value="{{api_metadata.name}}" />

                {% if api_metadata.arguments|length > 0 or api_metadata.post_arguments|length > 0 %}

                    <tr>
                        <th>Argument Name</th>
                        <th>Input</th>
                        <th>Required</th>
                        <th>Description</th>
                    </tr>

                    {% for argument in api_metadata.arguments %}
                    <tr>
                        <td>{% if argument.form_input_type == "custom_input"%} <input type="checkbox" name="cmd" value="{{argument.name}}" />{%endif%} {{argument.name}}:</td>
                        {% if argument.form_input_type == "custom_input"%}
                        <td>
                         {% for argument_data in argument.fields%}
                            {% for key,value in argument_data.items()%}
                                 <p class="customInput">{{value}}:</p> <input type="text" name="{{key}}"><br/>
                            {%endfor%}
                         {%endfor%}
                        </td>
                        {% else %}
                        <td><input type="{{argument.form_input_type}}" name="{{argument.name}}"/></td>
                        {% endif %}
                        <td>{{argument.required}}</td>
                        <td>{{argument.description}}</td>
                    </tr>
                    {% endfor %}

                    {% for argument in api_metadata.post_arguments %}
                    <tr>
                        <td>{{argument.name}}:</td>
                        <td><input type="{{argument.form_input_type}}" name="{{argument.name}}"/></td>
                        <td>{{argument.required}}</td>
                        <td>{{argument.description}}</td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <b>No Arguments</b>
                {% endif %}

                <tr>
                    <td colspan="2"><input type="submit" class="btn btn-primary" value="Execute"/></td>
                </tr>
            </table>
        </form>
    </div>
</div>
<br/>

{% endfor %}

<br/>

{% endblock %}

{% block tail %}
{{ super() }}

{% endblock %}